<template>
	<view class="warp">
		<view class="bg_color">
			<view class="concel" @click="cancelfn">
				<uni-icons type="closeempty" size="20"></uni-icons>

			</view>
			<view class="bg_title">
				输入档案，让我猜猜你的运势吧
			</view>
			<view class="bg_title_l">
				看看和你的近期是否相似
			</view>
		</view>
		<view class="form">
			<view class="sex">
				<view :class="sexnum==1?'sexactive':'boy'" @click="changesex(1)" >
					<view class="icon">
						<uni-icons color="#0b2659"  custom-prefix="iconfont" type="icon-nansheng" size="20"></uni-icons>
					</view>
					<view class="text">
						男生
					</view>
				</view>
				<view :class="sexnum==2?'sexactive':'girl'"   @click="changesex(2)">
					<view class="icon">
						<uni-icons color="#0b2659"  custom-prefix="iconfont" type="icon-nvsheng" size="20"></uni-icons>
					</view>
					<view class="text">
						女生
					</view>
				</view>
			</view>
			<view class="name">
				<view class="title">
					你的姓名
				</view>
				<view class="input-item">
					<view class="left" style="display: flex;align-items: center;">
						<span v-if="!form.masterName">请填写</span>
						<input v-model="form.masterName" type="text"  />
					</view>
					<view class="right">
						
					</view>
				</view>
			</view>
			<view class="date">
				<view class="title">
					你的生日
				</view>
				<view class="input-item" @click="showCalendar=true">
					<view class="left">
						<span v-if="!celenderValue">请选择</span>
						
						 <span style="font-size: 32rpx;margin-right: 10rpx;">{{celenderValue}}</span>
						 <text v-if="currentIndex==0" style="font-size: 32rpx;">(公历)</text>
						 <text v-if="currentIndex==1" style="font-size: 32rpx;">(农历)</text>
					</view>
					
					<view class="right">
						<e-run-calendar ref="betterCalendarRef" :showCalendar="showCalendar" @confirm="selectDate" :isHourShow="true"
						        @cancel="showCalendar = false" :selectOptions="selectOptionsArr"></e-run-calendar>
					</view>
				</view>
			</view>
			<view class="address">
				<view class="title" >
					出生地点
				</view>
				<view class="input-item" @click="openbrith">
					<view class="left" v-if="!form.masterAddress">
						<span>请选择</span>
						 
					</view>
					<pick-address ref="brithaddress" style="width: 100%;" :regionStrs="form.masterAddress" @region="pickaddressChange">
						 
					</pick-address>
					<view class="right">
						
					</view>
				</view>
			</view>
			<view class="now_address">
				<view class="title">
					现居住地址
				</view>
				<view class="input-item" @click="openadresspicker">
					<view class="left" v-if="!form.nowAddress">
						<span >请选择</span> 
					</view>
					<pick-address ref="nowaddress" style="width: 100%;" :regionStrs="form.nowAddress" @region="pickaddressChange2">
						 
					</pick-address>
					 
					<view class="right" >
						
					</view>
				</view>
			</view>
			
			<view class="next_state" @click="nextState">
				<view class="button">
					<uni-icons type="arrow-right" size="26"></uni-icons>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import eRunCalendar from "@/uni_modules/e-run-calendar/components/e-run-calendar/e-run-calendar.vue"
	import pickAddress from '@/components/picker-address/picker-address.vue'
	export default {
		components:{eRunCalendar,pickAddress},
		data() {
			return {
			 systemInfo:null,//手机参数
			 showCalendar: false,//是否显示组件
			 celenderValue: '',//选择值
			 selectOptionsArr: [80, 0, 0, 0],///起始年份
			 form:{
			 	masterName:'',
			 	masterSex:'',
			 	masterBirthday:'',
			 	masterAddress:'',
			 	masterAddressCode:'',
			 	masterAddressLatitude:'',//出生地经纬度
			 	masterTime:'',
			 	isLeap:null,
			 	isDaylight:false,
			 	nowAddress: "", //现居地
			 	nowAddressLatitude: "", //现居地经纬度
			 	birthTimeZone: "东8区" ,//出生时区
				isSelect:true,
			 	
			 },
			 currentIndex:null,//0 阳历  1农历 
			 sexnum:0,
			};
		},
		onShow(){
			uni.setStorageSync('prnumber',1)	
			this.systemInfo = uni.getSystemInfoSync();
		},
		
		methods:{
			changesex(val){
				this.sexnum=val
				if(val==1){
					this.form.masterSex='男'
				}else if(val==2){
					this.form.masterSex='女'
				}
			},
			// 选择日期
			selectDate(e){
				console.log(e);
				if(e.type == 'solar'){
					//公历
					this.currentIndex=0
					this.form.isLeap=null
					this.form.masterBirthday=e.year+'/'+e.month+'/'+e.day+'/'+' '+(e.hour+1).toString().padStart(2, '0')+":"+'00'
				    this.celenderValue=this.form.masterBirthday
				}else if(e.type == 'lunar'){
					//农历
					this.currentIndex=1
					this.form.masterBirthday=e.year+'/'+e.month+'/'+e.day+'/'+' '+(e.hour+1).toString().padStart(2, '0')+":"+'00'
					//判断是否闰月
					this.form.isLeap= e.leap_month == 1 ? 'true':'false'
					this.celenderValue=this.form.masterBirthday
				}
				console.log('this.form.masterBirthday',this.form.masterBirthday);
				this.showCalendar=false
			},
			openadresspicker(){
				// this.$refs.nowaddress.click()
				this.$refs.nowaddress.click()
			},
			openbrith(){
				this.$refs.brithaddress.click()
			},
			// 选择出生地还在
			async  pickaddressChange(value){
				console.log('value',value);
				this.form.masterAddress=value[0].name+value[1].name+value[2].name
				this.form.masterAddressCode=value[2].code
				
			    let result = await this.$getAddressLocation(this.form.masterAddress)
				this.form.masterAddressLatitude=result.lng+","+result.lat
			},
			// 选择居住地点
			async  pickaddressChange2(value){
				this.form.nowAddress=value[0].name+value[1].name+value[2].name
				
			    let result = await this.$getAddressLocation(this.form.nowAddress)
				this.form.nowAddressLatitude=result.lng+","+result.lat
				console.log(this.form.nowAddressLatitude);
			},
			// 保存档案
			nextState(){
				 if(!this.form.masterSex){
					 this.$modal.msg('请选择性别')
				 }else if(!this.form.masterName){
					  this.$modal.msg('请填写姓名')
				 }else if(!this.form.masterBirthday){
					 this.$modal.msg('请选择生日')
				 }else{
					 // 保存档案信息
					 let param={}
					 param.url='v3/member/front/master/add'
					 param.data=this.form
					 param.method="POST"
					 param.header={
					 	'Content-Type': 'application/json'
					 },
					 this.$request(param).then(res=>{
					 	if(res.state==200){
					 		console.log('注册成功');
					 		 
					 	}else{
					 		this.$modal.msg(res.msg)
					 	}
					 })
					 uni.redirectTo({
					 	url:"/pages/index/simpleeness1/simpleeness1"
					 })
				 }
				
			},
			// 关闭当前页
			cancelfn(){
				 uni.reLaunch({
					 url:"/pages/index/index"
				 })
				 
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
.warp{
	 
	.bg_color{
		 
		// overflow: hidden;
		// width: 100%;
		// background: linear-gradient(to bottom right, #92f5f0 , #FFFFFF);
		background: url(../../../static/images/ybg1.png) ;
		background-size: cover;
		height: 400rpx;
		text-align: center;
		line-height: 400rpx;
		overflow: hidden;
		position: relative;
		.concel{
			position: absolute;
			top: 80rpx;
			right:30rpx;
			width: 80rpx;
			height: 80rpx;
			line-height: 80rpx;
			// background-color: #fff;
			 
			 
		}
		.bg_title{
			margin-top: 180rpx;
			// display: inline-block;
			height: 50rpx;
			font-size: 36rpx;
			font-weight: 550;
			letter-spacing: 2rpx;
			line-height: 50rpx;
			   
		}
		.bg_title_l{
			margin-top: 230rpx;
			height: 50rpx;
			// display: inline-block;
			font-size:28rpx;
			letter-spacing: 2rpx;
			margin-top: 10rpx;
			line-height: 50rpx;
		}
	}
	.form{
		background-color: #fff;
		padding: 30rpx 40rpx;
		border-radius: 20rpx 20rpx 0 0;
		margin-top: -20rpx;
	// box-shadow: 2rpx 0rpx 0rpx 0rpx rgba(0, 0, 0, .1);
		.sex{
			display: flex;
			justify-content: space-between;
			.boy,.girl{
				width: 250rpx;
				height: 80rpx;
				padding: 0 50rpx;
				line-height: 80rpx;
				background-color: #f2f2f2;
				border-radius: 40rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.icon{
					width: 60rpx;
					height: 60rpx;
					line-height: 60rpx;
					// padding: 10rpx;
					border-radius: 50%;
					background: #fff;
					text-align: center;
					
				}
				.text{
					font-size: 28rpx;
					font-weight: 550;
				}
			}
			.sexactive{
				width: 250rpx;
				height: 80rpx;
				padding: 0 50rpx;
				line-height: 80rpx;
				background-color: #87CEEB;
				border-radius: 40rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.icon{
					width: 60rpx;
					height: 60rpx;
					line-height: 60rpx;
					// padding: 10rpx;
					border-radius: 50%;
					background: #fff;
					text-align: center;
					
				}
				.text{
					font-size: 28rpx;
					font-weight: 550;
					color: #FFFFFF;
				}
			}
		}
		.name,.date,.address,.now_address{
			margin-top: 20rpx;
			.title{
				font-size: 24rpx;
				color: #989898;
			}
			.input-item{
				margin-top: 10rpx;
				 height: 100rpx;
				 line-height: 100rpx;
				 border-radius: 20rpx;
				background-color: #f2f2f2;
				color: #989898;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 30rpx;
				 .left{
					 width: 100%;
				 }
				.right{
					  width: 0;
					  height: 0;
					  border-left: 12rpx solid transparent;
					  border-right: 12rpx solid transparent;
					  border-top: 12rpx solid #989898;
				}
			}
		}
		.next_state{
			width: 100%;
		margin-top: 80rpx;
			.button{
				width: 100rpx;
				height: 80rpx;
				line-height: 80rpx;
				background-color:  #f2f2f2;
				margin: 0 auto;
				text-align: center;
				border-radius: 40rpx;
				
			}
			
		}
	}
}
</style>
